<template>
    <div class="p3-container">
        <div class="chart-container" :style="{width:width}">
            <h2>
                Contrasting Information Disclosure Strategy of the Current Campaign with Fraudulent/Non-Fraudulent
                {{currentCampainCategory}}
                Campaigns in the Platform
            </h2>
            <div class="chart-container">
                <div :class="className" :id="id" :style="{height:height,width:width}"></div>
                <div class="line-container">
                    <span>Fraudulent Campaigns</span>
                    <div class="star-tip">
                        <div class="line-bar" id="line-bar"></div>
                        <div class="star-container" :style="customStyle">
                            <el-popover
                                    placement="top-start"
                                    width="266"
                                    popper-class="tip-show"
                                    trigger="hover"
                                    class="star-area"
                                    :content="getContent()"
                            >
                                <div slot="reference" class="star">
                                    <svg
                                            t="1578996932953"
                                            class="icon"
                                            viewBox="0 0 1024 1024"
                                            version="1.1"
                                            xmlns="http://www.w3.org/2000/svg"
                                            p-id="1910"
                                            width="32"
                                            height="32"
                                    >
                                        <path
                                                d="M1020.192 401.824c-8.864-25.568-31.616-44.288-59.008-48.352l-266.432-39.616-115.808-240.448c-12.192-25.248-38.272-41.408-66.944-41.408s-54.752 16.16-66.944 41.408l-115.808 240.448-266.464 39.616c-27.36 4.064-50.112 22.784-58.944 48.352-8.8 25.632-2.144 53.856 17.184 73.12l195.264 194.944-45.28 270.432c-4.608 27.232 7.2 54.56 30.336 70.496 12.704 8.736 27.648 13.184 42.592 13.184 12.288 0 24.608-3.008 35.776-8.992l232.288-125.056 232.32 125.056c11.168 5.984 23.488 8.992 35.744 8.992 14.944 0 29.888-4.448 42.624-13.184 23.136-15.936 34.88-43.264 30.304-70.496l-45.312-270.432 195.328-194.944c19.296-19.296 25.92-47.52 17.184-73.12zM754.816 619.616c-16.384 16.32-23.808 39.328-20.064 61.888l45.312 270.432-232.32-124.992c-11.136-6.016-23.424-8.992-35.776-8.992-12.288 0-24.608 3.008-35.744 8.992l-232.32 124.992 45.312-270.432c3.776-22.56-3.648-45.568-20.032-61.888l-195.264-194.944 266.432-39.68c24.352-3.616 45.312-18.848 55.776-40.576l115.872-240.384 115.84 240.416c10.496 21.728 31.424 36.928 55.744 40.576l266.496 39.68-195.264 194.912z"
                                                p-id="1911"
                                                fill="#0a67bf"
                                        />
                                    </svg>
                                </div>
                            </el-popover>
                        </div>
                    </div>
                    <span>Non-Fraudulent Campaigns</span>
                </div>
            </div>
        </div>
        <div class="legend">
            * Each layer of the gauge chart portrays the closeness of the statistics of a focal campaign towards
            fraudulent/non-fraudulent campaigns. The linear gauge bar presented at the bottom indicates the overall
            fraudulent tendency of the focal campaign based on all four statistical metrics.
        </div>
    </div>
</template>

<script>
    import echarts from "echarts";
    import {feature3Data} from "@/api/feature";
    import {mapState, mapMutations} from "vuex";

    export default {
        props: {
            className: {
                type: String,
                default: "chart"
            },
            id: {
                type: String,
                default: "chart"
            },
            width: {
                type: String,
                default: "400px"
            },
            height: {
                type: String,
                default: "400px"
            }
        },
        data() {
            return {
                chart: null,
                colorList: [],
                customStyle: {
                    left: "26px"
                }
            };
        },
        mounted() {
            this.initChart();

            console.log(this.gradientColors("#ff0d00", "#29dd47", 10));
        },
        beforeDestroy() {
            if (!this.chart) {
                return;
            }
            this.chart.dispose();
            this.chart = null;
        },
        computed: {
            ...mapState({
                currentCampainId: state => state.campaign.currentCampainId,
                currentCampainCategory: state => state.campaign.currentCampainCategory
            })
        },
        methods: {
            getContent() {
                return (
                    "Overall approach the current campaign towards fraudulent versus non-fraudulent " +
                    this.currentCampainCategory +
                    "  campaigns"
                );
            },
            parseColor(hexStr) {
                return hexStr.length === 4
                    ? hexStr
                        .substr(1)
                        .split("")
                        .map(function (s) {
                            return 0x11 * parseInt(s, 16);
                        })
                    : [hexStr.substr(1, 2), hexStr.substr(3, 2), hexStr.substr(5, 2)].map(
                        function (s) {
                            return parseInt(s, 16);
                        }
                    );
            },

            // zero-pad 1 digit to 2
            pad(s) {
                return s.length === 1 ? "0" + s : s;
            },

            gradientColors(start, end, steps, gamma) {
                var i,
                    j,
                    ms,
                    me,
                    output = [],
                    so = [];
                gamma = gamma || 1;
                var normalize = function (channel) {
                    return Math.pow(channel / 255, gamma);
                };
                start = this.parseColor(start).map(normalize);
                end = this.parseColor(end).map(normalize);
                for (i = 0; i < steps; i++) {
                    ms = i / (steps - 1);
                    me = 1 - ms;
                    for (j = 0; j < 3; j++) {
                        so[j] = this.pad(
                            Math.round(
                                Math.pow(start[j] * me + end[j] * ms, 1 / gamma) * 255
                            ).toString(16)
                        );
                    }
                    output.push("#" + so.join(""));
                }
                return output;
            },

            getColorShow(data) {
                // var colorList = [
                //   "#a52a2a",
                //   "#bb4639",
                //   "#d26148",
                //   "#e87d57",
                //   "#f4b02f",
                //   "#c0d471",
                //   "#9cc63d",
                //   "#76a22b",
                //   "#507d2e",
                //   "#00CC00"
                // ];

                var colorList = [
                    "#ff0d00",
                    "#e72408",
                    "#cf3b10",
                    "#b85218",
                    "#a06920",
                    "#888127",
                    "#70982f",
                    "#59af37",
                    "#41c63f",
                    "#29dd47"
                ];

                if (1 == data) {
                    return colorList[9];
                }

                return colorList[Math.floor(data * 100 / 10)];
            },

            async initChart() {
                var that = this;

                var featureData = await feature3Data();
                var currentData = featureData[this.currentCampainId];

                this.chart = echarts.init(document.getElementById(this.id));
                this.colorList = this.gradientColors("#f79d00", "#64f38c", 180);

                this.customStyle.left = 500 * currentData["overall_contrast"] + "px";

                console.error(this.customStyle);

                var dataStyle = {
                    normal: {
                        label: {
                            show: false,
                            formatter: function (params) {
                                if ("invisible" == params.name) {
                                    return "";
                                }
                                return "{a|" + params.seriesName + "}";
                            },
                            width: 166,
                            rich: {
                                x: {
                                    fontSize: 18,
                                    fontFamily: "Microsoft YaHei",
                                    borderColor: "#449933",
                                    borderRadius: 4
                                }
                            }
                        },
                        labelLine: {show: true, length: 80}
                    }
                };
                var placeHolderStyle_gray = {
                    normal: {
                        color: "#e3eaf1",
                        label: {show: false},
                        labelLine: {show: false}
                    }
                };
                var placeHolderStyle = {
                    normal: {
                        color: "rgba(0,0,0,0)",
                        label: {show: false},
                        labelLine: {show: false}
                    }
                };
                let option = {
                    title: {
                        x: "center",
                        y: "center",
                        itemGap: 30,
                        textStyle: {
                            color: "rgba(30,144,255,0.8)",
                            fontFamily: "微软雅黑",
                            fontSize: 35,
                            fontWeight: "bolder"
                        }
                    },
                    tooltip: {
                        show: true,
                        trigger: "item",
                        formatter: function (params) {
                            if ("invisible" == params.name) {
                                return "";
                            } else {
                                if (params.data.name.indexOf("images") != -1) {
                                    return params.data.name + ":" + currentData["num_images"];
                                }
                                if (params.data.name.indexOf("links") != -1) {
                                    return params.data.name + ":" + currentData["num_links"];
                                }
                                if (params.data.name.indexOf("channels") != -1) {
                                    return params.data.name + ":" + currentData["num_websites"];
                                }
                                if (params.data.name.indexOf("words") != -1) {
                                    return params.data.name + ":" + currentData["num_words"];
                                }
                            }
                        }
                    },
                    series: [
                        {
                            name: "Number of revealed social media channels",
                            type: "pie",
                            clockWise: true,
                            radius: [201, 225],
                            itemStyle: dataStyle,
                            startAngle: -180,
                            data: [
                                {
                                    value: 180 * currentData["num_websites_contrast"],
                                    name: "Number of revealed social media channels",
                                    label: {
                                        color: "black"
                                    },
                                    itemStyle: {
                                        normal: {
                                            //颜色渐变
                                            // color: {
                                            //   type: "linear",
                                            //   x: 0,
                                            //   y: 0.5,
                                            //   x2: 1,
                                            //   y2: 0.5,
                                            //   colorStops: [
                                            //     {
                                            //       offset: 0,
                                            //       color: that.colorList[0] // 0% 处的颜色
                                            //     },
                                            //     {
                                            //       offset: 1,
                                            //       color:
                                            //         that.colorList[
                                            //           Math.floor(
                                            //             180 * currentData["num_websites_contrast"]
                                            //           )
                                            //         ] // 100% 处的颜色
                                            //     }
                                            //   ],
                                            //   globalCoord: true // 缺省为 false
                                            // }
                                            color: that.getColorShow(
                                                currentData["num_websites_contrast"]
                                            )
                                        }
                                    }
                                },
                                {
                                    value: 180 - 180 * currentData["num_websites_contrast"],
                                    name: "invisible",
                                    labelLine: {
                                        show: false
                                    },
                                    emphasis: {
                                        label: {
                                            show: false
                                        },
                                        labelLine: {
                                            show: false
                                        }
                                    },
                                    itemStyle: placeHolderStyle_gray
                                },
                                {
                                    value: 180,
                                    name: "invisible",
                                    labelLine: {
                                        show: false
                                    },
                                    itemStyle: placeHolderStyle
                                }
                            ]
                        },
                        {
                            name: "Number of images",
                            type: "pie",
                            clockWise: true,
                            radius: [176, 200],
                            itemStyle: dataStyle,
                            startAngle: -180,
                            data: [
                                {
                                    value: 180 * currentData["num_images_contrast"],
                                    name: "Number of images",
                                    label: {
                                        color: "black"
                                    },
                                    itemStyle: {
                                        normal: {
                                            //颜色渐变
                                            // color: {
                                            //   type: "linear",
                                            //   x: 0,
                                            //   y: 0.5,
                                            //   x2: 1,
                                            //   y2: 0.5,
                                            //   colorStops: [
                                            //     {
                                            //       offset: 0,
                                            //       color: that.colorList[0] // 0% 处的颜色
                                            //     },
                                            //     {
                                            //       offset: 1,
                                            //       color:
                                            //         that.colorList[
                                            //           Math.floor(
                                            //             180 * currentData["num_images_contrast"]
                                            //           )
                                            //         ] // 100% 处的颜色
                                            //     }
                                            //   ],
                                            //   globalCoord: true // 缺省为 false
                                            // }
                                            color: that.getColorShow(currentData["num_images_contrast"])
                                        }
                                    }
                                },
                                {
                                    value: 180 - 180 * currentData["num_images_contrast"],
                                    name: "invisible",
                                    labelLine: {
                                        show: false
                                    },
                                    itemStyle: placeHolderStyle_gray
                                },
                                {
                                    value: 180,
                                    name: "invisible",
                                    labelLine: {
                                        show: false
                                    },
                                    itemStyle: placeHolderStyle
                                }
                            ]
                        },
                        {
                            name: "Number of words",
                            type: "pie",
                            clockWise: true,
                            radius: [151, 175],
                            itemStyle: dataStyle,
                            startAngle: -180,
                            data: [
                                {
                                    value: 180 * currentData["num_words_contrast"],
                                    name: "Number of words",
                                    label: {
                                        color: "black"
                                    },
                                    itemStyle: {
                                        normal: {
                                            //颜色渐变
                                            // color: {
                                            //   type: "linear",
                                            //   x: 0,
                                            //   y: 0.5,
                                            //   x2: 1,
                                            //   y2: 0.5,
                                            //   colorStops: [
                                            //     {
                                            //       offset: 0,
                                            //       color: that.colorList[0] // 0% 处的颜色
                                            //     },
                                            //     {
                                            //       offset: 1,
                                            //       color:
                                            //         that.colorList[
                                            //           Math.floor(
                                            //             180 * currentData["num_words_contrast"]
                                            //           )
                                            //         ] // 100% 处的颜色
                                            //     }
                                            //   ],
                                            //   globalCoord: true // 缺省为 false
                                            // }
                                            color: that.getColorShow(currentData["num_words_contrast"])
                                        }
                                    }
                                },
                                {
                                    value: 180 - 180 * currentData["num_words_contrast"],
                                    name: "invisible",
                                    labelLine: {
                                        show: false
                                    },
                                    itemStyle: placeHolderStyle_gray
                                },
                                {
                                    value: 180,
                                    labelLine: {
                                        show: false
                                    },
                                    name: "invisible",
                                    itemStyle: placeHolderStyle
                                }
                            ]
                        },
                        {
                            name: "Number of external links",
                            type: "pie",
                            clockWise: true,
                            radius: [126, 150],
                            itemStyle: dataStyle,
                            startAngle: -180,
                            data: [
                                {
                                    value: 180 * currentData["num_links_contrast"],
                                    name: "Number of external links",
                                    itemStyle: {
                                        normal: {
                                            color: "pink"
                                        }
                                    },
                                    label: {
                                        color: "black"
                                    },
                                    itemStyle: {
                                        normal: {
                                            //颜色渐变
                                            // color: {
                                            //   type: "linear",
                                            //   x: 0,
                                            //   y: 0.5,
                                            //   x2: 1,
                                            //   y2: 0.5,
                                            //   colorStops: [
                                            //     {
                                            //       offset: 0,8
                                            //       color: that.colorList[0] // 0% 处的颜色
                                            //     },
                                            //     {
                                            //       offset: 1,
                                            //       color:
                                            //         that.colorList[
                                            //           Math.floor(
                                            //             180 * currentData["num_links_contrast"]
                                            //           )
                                            //         ] // 100% 处的颜色
                                            //     }
                                            //   ],
                                            //   globalCoord: true // 缺省为 false
                                            // }
                                            color: that.getColorShow(currentData["num_links_contrast"])
                                        }
                                    }
                                },
                                {
                                    value: 180 - 180 * currentData["num_links_contrast"],
                                    name: "invisible",
                                    labelLine: {
                                        show: false
                                    },
                                    itemStyle: placeHolderStyle_gray
                                },
                                {
                                    value: 180,
                                    name: "invisible",
                                    labelLine: {
                                        show: false
                                    },
                                    itemStyle: placeHolderStyle
                                }
                            ]
                        }
                    ]
                };

                this.chart.setOption(option);
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .p3-container {
        width: 100%;
        height: 100%;
        position: relative;
        h2 {
            text-align: center;
        }
        .chart-container {
            position: relative;
            .line-container {
                position: absolute;
                top: 310px;
                left: 66px;
                display: flex;
                span {
                    margin: 0 5px;
                }
                .line-bar {
                    background: linear-gradient(to right, #ff0d00, #29dd47);
                    height: 16px;
                    width: 469px;
                    margin: 0 auto;
                }
                .star-tip {
                    position: relative;
                    .star-container {
                        width: 30px;
                        height: 30px;
                        position: absolute;
                        top: -22px;
                        .star-area {
                            .star {
                                /* background-image: url('/static/img/star.png');
                                          background-repeat: no-repeat;
                                          background-size: 100% 100%;*/
                                width: 30px;
                                height: 30px;
                                position: relative;
                                top: -5px;
                            }
                        }

                        .tip-show {
                            text-align: center;
                        }
                    }
                }
            }
        }
        .legend {
            position: absolute;
            width: 366px;
            top: 226px;
            right: 126px;
            font-weight: bold;
        }
    }
</style>
